Trang web dự án năm cuối sử dụng CSS HTML5

1 /* TIMELINE
2 –––––––––––––––––––––––––––––––––––––––––––––––––– */
3
4 .timeline ul {
5   background: #456990;
6   padding: 50px 0;
7 }
8
9 .timeline ul li {
10   list-style-type: none;
11   position: relative;
12   width: 6px;
13   margin: 0 auto;
14   padding-top: 50px;
15   background: #fff;
16 }
17
18 .timeline ul li::after {
19   content: '';
20   position: absolute;
21   left: 50%;
22   bottom: 0;
23   transform: translateX(-50%);
24   width: 30px;
25   height: 30px;
26   border-radius: 50%;
27   background: inherit;
28 }
29
30 .timeline ul li div {
31   position: relative;
32   bottom: 0;
33   width: 400px;
34   padding: 15px;
35   background: #F45B69;
36 }
37
38 .timeline ul li div::before {
39   content: '';
40   position: absolute;
41   bottom: 7px;
42   width: 0;
43   height: 0;
44   border-style: solid;
45 }
46
47 .timeline ul li:nth-child(odd) div {
48   left: 45px;
49 }
50
51 .timeline ul li:nth-child(odd) div::before {
52   left: -15px;
53   border-width: 8px 16px 8px 0;
54   border-color: transparent #F45B69 transparent transparent;
55 }
56
57 .timeline ul li:nth-child(even) div {
58   left: -439px;
59 }
60
61 .timeline ul li:nth-child(even) div::before {
62   right: -15px;
63   border-width: 8px 0 8px 16px;
64   border-color: transparent transparent transparent #F45B69;
65 }
66
67 time {
68   display: block;
69   font-size: 1.2rem;
70   font-weight: bold;
71   margin-bottom: 8px;
72 }
73
74
75 /* EFFECTS
76 –––––––––––––––––––––––––––––––––––––––––––––––––– */
77
78 .timeline ul li::after {
79   transition: background .5s ease-in-out;
80 }
81
82 .timeline ul li.in-view::after {
83   background: #F45B69;
84 }
85
86 .timeline ul li div {
87   visibility: hidden;
88   opacity: 0;
89   transition: all .5s ease-in-out;
90 }
91
92 .timeline ul li:nth-child(odd) div {
93   transform: translate3d(200px, 0, 0);
94 }
95
96 .timeline ul li:nth-child(even) div {
97   transform: translate3d(-200px, 0, 0);
98 }
99
100 .timeline ul li.in-view div {
101   transform: none;
102   visibility: visible;
103   opacity: 1;
104 }
105
106
107 /* GENERAL MEDIA QUERIES
108 –––––––––––––––––––––––––––––––––––––––––––––––––– */
109
110 @media screen and (max-width: 900px) {
111   .timeline ul li div {
112     width: 250px;
113   }
114   .timeline ul li:nth-child(even) div {
115     left: -289px;
116     /*250+45-6*/
117   }
118 }
119
120 @media screen and (max-width: 600px) {
121   .timeline ul li {
122     margin-left: 20px;
123   }
124   .timeline ul li div {
125     width: calc(100vw - 91px);
126   }
127   .timeline ul li:nth-child(even) div {
128     left: 45px;
129   }
130   .timeline ul li:nth-child(even) div::before {
131     left: -15px;
132     border-width: 8px 16px 8px 0;
133     border-color: transparent #F45B69 transparent transparent;
134   }
135 }


Web, Tìm kết quả nhanh

Kích thước hoặc độ phức tạp của bản gửi này, tác giả đã gửi nó dưới dạng tệp .zip để rút ngắn thời gian tải xuống của bạn. Sau khi tải xuống, bạn sẽ cần một chương trình như Winzip để giải nén nó.

Tất cả các tệp đều được codefly.vn quét mỗi ngày một lần để tìm vi-rút, nhưng vi-rút mới xuất hiện hàng ngày nên không có chương trình phòng ngừa nào có thể bắt được 100% chúng.

ĐỂ AN TOÀN CỦA CHÍNH BẠN, VUI LÒNG:

1. Quét lại các tệp đã tải xuống bằng trình kiểm tra vi-rút cá nhân của bạn trước khi sử dụng.

2. KHÔNG BAO GIỜ, chạy các tệp đã biên dịch (.exe's, .ocx's, .dll's, v.v.)--chỉ chạy code mà bạn đã xem ít nhất 1 lần.

Official Website:

https://projectnotes.org/.....te-using-html5-css/

Gõ tìm kiếm nhanh...



Dự án liên quan!

ID và Class

46 lượt xem

Nổi và Xóa

43 lượt xem

Hướng dẫn CSS – Phần 1 – Các loại

51 lượt xem

Hiệu ứng tải CSS

45 lượt xem

Hình dạng hình học CSS

49 lượt xem

Nền CSS (Hình ảnh và Màu sắc)

49 lượt xem